<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>我的等级</h2>
    积分值：<input type="number" class="num" value="22" /> 等级：
    <p></p>
    <script>
      let numInput = document.querySelector('.num')
      numInput.addEventListener('change', function () {
        let num = numInput.value
        console.log(typeof num)
        let dengji = 0
        if (num > 20) {
          dengji = 5
        } else if (num > 15) {
          dengji = 4
        } else if (num > 10) {
          dengji = 3
        } else if (num > 5) {
          dengji = 2
        } else if (num > 0) {
          dengji = 1
        } else {
          dengji = 0
        }

        let shi = '★'
        let xu = '☆'

        let p = document.querySelector('p')
        let result = ''
        for (let i = 1; i <= 5; i++) {
          if (i <= dengji) {
            result += shi
          } else {
            result += xu
          }
        }
        p.innerHTML = result
      })

      // const btn = document.querySelector('#btnNum')
      // const num = document.querySelector('#txtNum')
      // btn.addEventListener('click', function (score) {
      //   if (!isNaN(score)) {
      //     return alert('请输入数字')
      //   } else if (score < 0 || score > 100) {
      //     return alert('请输入1-100之间的数字')
      //   } else if (score >= 1 || score <= 20) {
      //     return alert('您的等级为一级')
      //   }
      // })
    </script>
  </body>
</html>
